<template>
  <div>
    <div v-if="isShowBtn" class="tableBtn">
      <el-button type="primary" @click="handleAdd">新建</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" show-overflow-tooltip>
        <el-table-column type="index" label="序号" width="70" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column label="性别">
          <template #default="scope">
            <el-tag
              type="primary"
              size="large"
              class="elTag"
              :color="
                scope.row.sex == '0' ? 'rgba(2, 167, 240)' : 'rgba(112, 182, 3)'
              "
              >{{ scope.row.sex == "0" ? "男" : "女" }}</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="educationalBackground" label="学历" />
        <el-table-column prop="profession" label="专业" />
        <el-table-column prop="graduateSchool" label="毕业院校" />
        <el-table-column prop="phoneNumber" label="联系电话" width="" />
        <el-table-column prop="mail" label="邮箱" width="" />
      </el-table>
    </div>
    <Pagination
      :total="pagination.total"
      :page="pagination.page"
      :limit="pagination.limit"
      :pageSizes="pagination.pageSizes"
      @handleSizeChange="sizeChange"
      @handleCurrentChange="currentChange"
    >
    </Pagination>
  </div>
</template>

<script setup>
import Pagination from "@/components/Pagination/pageination.vue";
import { getCommonTableHeight } from "@/utils/commonTableHeight.js";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
const props = defineProps({
  isShowBtn: Boolean,
  isApproval: Boolean,
  tableData: Array,
  pagination: {
    type: Object,
    required: true,
    default: () => ({
      total: 10,
      page: 1,
      limit: 10,
      pageSizes: 10,
    }),
  },
  toTip: String,
  btnShow: {
    type: Boolean,
    default: true,
  },
});

const router = useRouter();
const tabHeight = ref(0);

const emit = defineEmits(["sizeChange", "currentChange"]);

onMounted(() => {
  updateViewportHeight(); // 初始化视口高度
  window.addEventListener("resize", updateViewportHeight); // 监听窗口大小变化
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", updateViewportHeight); // 移除监听
});

const handleInfo = () => {
  if (props.toTip == "草稿") {
    router.push({
      name: "needPersonView",
    });
    console.log("草稿查看");
  } else if (props.toTip == "审批中") {
    console.log("审批中查看");
    router.push({
      name: "needAppPersonView",
    });
  } else if (props.toTip == "审批完成") {
    console.log("审批完成查看");
    router.push({
      name: "needSucPersonView",
    });
  }
};
// 新增
const handleAdd = () => {
  router.push({
    name: "addNeedPerson",
  });
};
// 编辑
const handleEdit = () => {
  router.push({
    name: "editNeedPerson",
  });
};
// 审批
const handleWork = () => {
  router.push({
    name: "needPersonWork",
  });
};
// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm("是否要删除这条用人需求申请?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      console.log(row, "删除");
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};
// 页面高度
const updateViewportHeight = () => {
  tabHeight.value = getCommonTableHeight();
};
const sizeChange = (size) => {
  console.log(size, "size");
  emit("sizeChange", size);
};
const currentChange = (page) => {
  console.log(page, "1");
  emit("currentChange", page);
};
</script>

<style lang="scss" scoped>
// :deep(.el-table__header) {
//   height: 70px;
// }
.tableBtn {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.elTag {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.btn {
  font-size: 15px;
  font-weight: bold;
}
</style>
